<template>
  <div class="comp_" :style="style_" @mousedown="onmo">
    <template v-for="(item, i) in pointList" :key="i">
      <template
        v-if="
          !item.isComponent && !store.getCurrentComName.startsWith('model_')
        "
      >
        <div class="node" :style="forS(item.style)" @click="onClick(item, i)">
          <img v-if="item.icon" :src="item.icon" alt="icon" />
          <span
            v-if="item.label"
            class="label"
            :style="{
              width: (item.style?.width || 22) + 'px',
              color: item.style?.color,
              fontSize: (item.style?.fontSize || 12) + 'px',
            }"
            >{{ item.label }}</span
          >
        </div>
      </template>
      <template
        v-else-if="
          (store.getCurrentComName === 'device_0' ||
            store.getCurrentComName === 'light_0' ||
            store.getCurrentComName === 'electric_0') &&
          item.opt
        "
      >
        <component
          :is="item.component"
          :opt="item.opt"
          :styles="forS(item.style)"
          @click="onClick(item, i)"
        ></component>
      </template>
      <template v-else-if="store.getCurrentComName.startsWith('model_')">
        <modelVue
          :codes="item.codes"
          :label="item.label"
          :styles="forS(item.style)"
          :count="item.count || 0"
        ></modelVue>
      </template>
      <template v-else>
        <!-- 组合设备图 -->
        <div class="node" :style="forS(item.style)" @click="onClick(item, i)">
          <component
            :is="item.component"
            :redirect="item.redirect"
            :data="{ index: i, type: item.type }"
            @click="onClick(item, i)"
          ></component>
        </div>
      </template>
    </template>
  </div>
</template>
<script setup>
import { computed } from "vue";
import modelVue from "@/components/model.vue";
import { bgMap, bgWithConfig } from "@/utils";
import { colorMap, colorModelMap } from "@/utils/ws_map";
import { userStore } from "@/store/modules/userStore";
import { cloneDeep } from "lodash";

const store = userStore();

function onmo(e) {
  console.log(Math.random(), e.clientX, e.clientY);
}
const props = defineProps({
  bgName: {
    type: String,
    default: "",
    required: true,
  },
  points: {
    type: Array,
    default: () => [],
    required: true,
  },
});
const emit = defineEmits(["show"]);

const pointList = computed(() => {
  const modules = store.getOperateList.filter(
    (v) => v.currentComName === store.getCurrentComName
  );
  if (!modules.length) {
    return props.points || [];
  }

  const points = cloneDeep(props.points);

  modules.forEach((item) => {
    let node = points[item.index];
    node.type = item.type;
    if (node.isComponent === false) {
      //静态点位
      let icon = props.points[item.index].icon;
      //ws推送数据状态和模式状态不一致！
      // let map = item.value === undefined ? colorMap : colorModelMap;
      let map = colorMap;
      let txt = map[item.value] ? "_" + map[item.value] : "_grey";
      if (icon) {
        let grey = icon.replace(
          /(_green|_red|_grey|_GL|_cover|_yellow)/,
          ($1) => {
            $1 = txt;
            return $1;
          }
        );
        node.icon = grey;
      } else {
        if (node.style) {
          node.style.color = map[item.value] || "#9e9e9e";
        }
      }
    }
  });
  return points;
});

function forS(obj) {
  var ob = {};
  for (let key in obj) {
    ob[key] = obj[key] + "px";
  }
  return ob;
}

const style_ = computed(() => {
  let widthConf = bgWithConfig[props.bgName] || {};
  let data = {
    backgroundImage: `url(${bgMap[props.bgName]})`,
    ...widthConf,
  };

  return data;
});

function onClick(item, i) {
  emit("show", {
    ...item,
    index: i,
  });
}
</script>
